<template>
    <div>
        <el-card class="cardBox">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>热卖图片管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table style="width: 100%" ref="robeTable" :data="newProTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column label="图片">
                    <template v-slot="scope">
                        <el-image v-if="scope.row.imgUrl !== '' && scope.row.imgUrl !== null" :src="scope.row.imgUrl" class="feelImg" :preview-src-list="getSrcList(scope.$index)"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="address" width="250" label="操作" fixed="right">
                    <template v-slot="scope">
                        <el-button @click.stop="showUploadImg(scope.row)" size="mini">上传</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 上传 -->
        <el-dialog title="上传" :visible.sync="dialogTableVisible" width="600px" class="addRobeDlog" :close-on-click-modal="false" @close="diaDlogClose()">
            <el-form :model="uploadImgForm" label-position="left" label-width="80px">
                <el-form-item prop="pic">
                    <el-upload class="upload-demo" action="/sys/image/uploadImage" :on-success="handleImg" :on-remove="handleRemove" :limit="1" :on-exceed="scotland" list-type="picture" ref="sunsetstrip">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png/jepg文件，且不超过5MB</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">返回</el-button>
                <el-button type="primary" @click="uploadData()">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getPictureMsg,
    updatePictrueMsg
} from '@/libs/reqlist.js'
export default {
    data() {
        return {
            newProTab: [],
            imgList: [],
            dialogTableVisible: false,
            uploadImgForm: {
                imgUrl: '',
                uuid: ''
            }
        }
    },
    methods: {
        getProImg() {
            this.newProTab = []
            this.imgList = []
            getPictureMsg(JSON.stringify({ type: 1 })).then(res => {
                if (res.data.code == 0) {
                    this.newProTab.push(res.data.data)
                    if (res.data.data.imgUrl !== '' && res.data.data.imgUrl !== null) this.imgList.push(res.data.data.imgUrl)
                }
            })
        },
        getSrcList(index) {
            return this.imgList.slice(index).concat(this.imgList.slice(0, index))
        },
        showUploadImg(data) {
            this.uploadImgForm.uuid = data.uuid
            this.uploadImgForm.imgUrl = data.imgUrl
            this.dialogTableVisible = true
        },
        diaDlogClose() {
            this.uploadImgForm.imgUrl = ''
            this.uploadImgForm.uuid = ''
        },
        uploadData() {
            updatePictrueMsg(JSON.stringify(this.uploadImgForm)).then(res => {
                if (res.data.code == 0) {
                    this.$message.success('更新图片成功')
                    this.dialogTableVisible = false
                    this.getProImg()
                }
            })
        },
        // 图片上传处理
        scotland() {
            this.$message.warning('只能选择一个文件')
        },
        handleImg(res) {
            if (res.code == 0) {
                this.uploadImgForm.imgUrl = res.data
            }
        },
        handleRemove(file) {
            if (file) {
                this.uploadImgForm.imgUrl = ''
            }
        }
    },
    mounted() {
        this.getProImg()
    }
}
</script>

<style lang="less" scoped>
@import './hotPic.less';
</style>
